<template>
  <div class='menu left-menu' v-if="endlessKanvasScene">
    <div v-for="(button, index) in buttons" :key="button.image + index" :class="{ 'glow-effect': clickedIndex === index }"
      style='padding:3px'>
      <q-img :src="hoverIndex === index ? button.imageHoverUri : button.imageUri" @mouseenter="hoverIndex = index"
        @mouseleave="hoverIndex = null" width='48px' @click=" toggleGlow(index), button.callback()" class="image-button">
      </q-img>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { toolbarButtons } from '../apps/toolbar/toolbarButtons';
import { usePhaserStore } from '../stores/phaserStore';
import { mapState } from 'pinia';
export default defineComponent({
  name: 'leftMenu',
  data() {
    return {
      hoverIndex: null,
      clickedIndex: null,
    };
  },
  computed: {
    ...mapState(usePhaserStore, ['endlessKanvasScene']),

    buttons(): any[] {
      return toolbarButtons(this.endlessKanvasScene);
    },
  },
  methods: {
    toggleGlow(index) {
      // this.clickedIndex = this.clickedIndex === index ? null : index;
      this.clickedIndex = index;
      setTimeout(() => this.clickedIndex = null, 1000);
    },
  },
});
</script>
<style scoped>
.left-menu {
  top: 0;
  left: 0;
  width: 54px;
  height: calc(100vh - 10px);
  background-color: transparent;
  align-items: center;
  margin-top: 5px;
  margin-left: 5px;
  /* border: dotted greenyellow; */
  flex-direction: column;
  justify-content: center;
}

.image-button {
  cursor: pointer;
  pointer-events: initial;
}

.menu {
  position: fixed;
  pointer-events: none;
  background-color: transparent;
  display: flex;
  z-index: 100;
}

.glow-effect {
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.9);

  /* Пример стиля "glow" */
}
</style>
